<template>
  <view class="hospital-container">
    <!-- 医院封面 -->
    <view class="cover">
      <image :src="hospital.coverImage" mode="aspectFill" class="bg-image" />
      <view class="overlay"></view>
      <view class="hospital-info">
        <image :src="hospital.logo" mode="aspectFit" class="logo" />
        <view class="info">
          <text class="name">{{ hospital.name }}</text>
          <text class="type">{{ hospital.type }}</text>
          <view class="tags">
            <text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 基本信息 -->
    <view class="info-section card">
      <view class="info-item">
        <text class="label">医院地址</text>
        <text class="value">{{ hospital.address }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系电话</text>
        <text class="value">{{ hospital.phone }}</text>
      </view>
      <view class="info-item">
        <text class="label">营业时间</text>
        <text class="value">{{ hospital.hours }}</text>
      </view>
    </view>
    
    <!-- 医院介绍 -->
    <view class="intro-section card">
      <view class="section-title">医院介绍</view>
      <text class="intro-text">{{ hospital.introduction }}</text>
      <view class="image-list">
        <image 
          v-for="(img, idx) in hospital.images" 
          :key="idx"
          :src="img"
          mode="aspectFill"
          @tap="previewImage(idx)"
        />
      </view>
    </view>
    
    <!-- 特色科室 -->
    <view class="featured-section card">
      <view class="section-title">特色科室</view>
      <view class="department-list">
        <view 
          class="department-item"
          v-for="(dept, index) in hospital.featuredDepartments"
          :key="index"
          @tap="navigateToDepartment(dept)"
        >
          <image :src="dept.icon" mode="aspectFit" class="icon" />
          <view class="info">
            <text class="name">{{ dept.name }}</text>
            <text class="desc">{{ dept.description }}</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 交通指引 -->
    <view class="guide-section card">
      <view class="section-title">交通指引</view>
      <view class="map-container">
        <map 
          :latitude="hospital.latitude" 
          :longitude="hospital.longitude"
          :markers="[{
            latitude: hospital.latitude,
            longitude: hospital.longitude,
            iconPath: '/static/icons/marker.png',
            width: 32,
            height: 32
          }]"
          class="map"
        />
      </view>
      <view class="transport-list">
        <view class="transport-item" v-for="(item, idx) in hospital.transport" :key="idx">
          <text class="type">{{ item.type }}</text>
          <text class="route">{{ item.route }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const hospital = ref({
  id: 1,
  name: '澳门镜湖医院',
  type: '三级甲等综合医院',
  logo: '/static/hospital/kiang-wu.jpg',
  coverImage: '/static/hospital/kiang-wu.png',
  address: '澳门连胜马路33号',
  phone: '+853 2837 1333',
  hours: '门诊：周一至周日 8:00-22:00\n急诊：24小时',
  tags: ['综合医院', '24小时急诊', '特需门诊'],
  introduction: '澳门镜湖医院创立于1871年，是澳门历史最悠久的非牟利医疗机构...',
  images: [
    '/static/hospital/image1.jpg',
    '/static/hospital/image2.jpg',
    '/static/hospital/image3.jpg'
  ],
  featuredDepartments: [
    {
      id: 1,
      name: '心内科',
      icon: '/static/department/cardiology.png',
      description: '心血管疾病诊治'
    }
  ],
  latitude: 22.1934,
  longitude: 113.5529,
  transport: [
    {
      type: '公交路线',
      route: '3、3X、10、10A、23、32等路公交车到镜湖医院站'
    },
    {
      type: '轻轨路线',
      route: '澳门轻轨氹仔线到科技大学站，步行约10分钟'
    }
  ]
})

const previewImage = (index) => {
  uni.previewImage({
    urls: hospital.value.images,
    current: index
  })
}

const navigateToDepartment = (dept) => {
  uni.navigateTo({
    url: `/pages/department/detail?id=${dept.id}&hospitalId=${hospital.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const hospitalId = page.$page?.options?.id
  
  // 加载医院详情数据
  loadHospitalDetail(hospitalId)
})

const loadHospitalDetail = (id) => {
  // 加载医院详情数据的逻辑
}
</script>

<style lang="scss">
.hospital-container {
  min-height: 100vh;
  background: $bg-color;
  
  .cover {
    position: relative;
    height: 400rpx;
    
    .bg-image {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 60%;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
    }
    
    .hospital-info {
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 30rpx;
      display: flex;
      align-items: center;
      z-index: 1;
      
      .logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: $radius-lg;
        border: 4rpx solid rgba(255,255,255,0.2);
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name {
          font-size: 36rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .type {
          font-size: 26rpx;
          color: rgba(255,255,255,0.8);
          margin-bottom: 12rpx;
          display: block;
        }
        
        .tags {
          text {
            display: inline-block;
            font-size: 22rpx;
            color: #fff;
            background: rgba($primary-color, 0.3);
            padding: 4rpx 12rpx;
            border-radius: $radius-sm;
            margin-right: 10rpx;
            backdrop-filter: blur(10px);
          }
        }
      }
    }
  }
  
  .card {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
  }
  
  .section-title {
    font-size: 32rpx;
    color: $text-primary;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 30rpx;
      background: $primary-color;
      border-radius: 3rpx;
      margin-right: 16rpx;
    }
  }
  
  .info-section {
    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        width: 140rpx;
        font-size: 26rpx;
        color: $text-secondary;
      }
      
      .value {
        flex: 1;
        font-size: 26rpx;
        color: $text-primary;
        line-height: 1.6;
      }
    }
  }
  
  .intro-section {
    .intro-text {
      font-size: 26rpx;
      color: $text-regular;
      line-height: 1.8;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .image-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      
      image {
        width: 100%;
        height: 200rpx;
        border-radius: $radius-md;
      }
    }
  }
  
  .featured-section {
    .department-list {
      .department-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
          padding-bottom: 0;
        }
        
        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .desc {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
        
        .arrow {
          font-size: 24rpx;
          color: $text-secondary;
          margin-left: 20rpx;
        }
      }
    }
  }
  
  .guide-section {
    .map-container {
      height: 400rpx;
      margin-bottom: 20rpx;
      border-radius: $radius-md;
      overflow: hidden;
      
      .map {
        width: 100%;
        height: 100%;
      }
    }
    
    .transport-list {
      .transport-item {
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .type {
          font-size: 26rpx;
          color: $primary-color;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .route {
          font-size: 26rpx;
          color: $text-regular;
          line-height: 1.6;
        }
      }
    }
  }
}
</style> 